{% extends "::base.html.twig" %}

{% block body %}
<div id="journal_caisse" class="row-fluid">
    <div class="span12">
        <div class="box gradient">
            <div class="title" style="text-align: center">
                <h4>Journal de caisse</h4>
            </div>
            <div id="div_list_detail_caisse" class="content noPad clearfix">
                <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
                    <div id="DataTables_Table_0_filter" class="dataTables_filter" style="width: 90%">
                        <div class="span2" style="margin-left: 10px; height: 55px;">
                            <label style="width: 100%"> Caisse:</label>
                            <select id="caisse" >
                                <option value="-1">Selectionner une caisse</option>
{% for caisse in caisses %}
                                <option value="{{caisse.id}}">{{caisse}}</option>
        {% endfor %}
                            </select>
                        </div>
                        <div class="span2" style="margin-left: 10px; height: 55px;">
                            <label style="width: 100%"> Date:</label>
                            <input id="filtre_date1" class="text" type="text" style="width:80%;margin-left: 0">
                        </div>
                        <div class="span2" style="margin-left: 10px; height: 55px;">
                            <label style="width: 100%"> Jusqu'à:</label>
                            <input id="filtre_date2" class="text" type="text" style="width:80%;margin-left: 0">
                        </div>
                        <div class="span2" style="margin-left: 10px; height: 55px;">
                            <label style="width: 100%">
                                Heure:</label>
                            <select id="filtre_heure" class="nostyle"  style="width:80%;margin-left: 0"required="required">
                                <option value="1"></option>
                                <option value="2">07h -> 12h</option>
                                <option value="3">12h -> 21h</option>
                                <option value="4">08h -> 10h</option>
                                <option value="5">10h -> 12h</option>
                                <option value="6">12h -> 14h</option>
                                <option value="7">14h -> 16h</option>
                                <option value="8">16h -> 18h</option>
                                <option value="9">18h -> 20h</option>
                                <option value="10">20h -> 22h</option>
                            </select>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12" style="padding: 30px;">
                            <div class="span12" style="margin-left: 0px;font-family: monospace;font-size: 20px;font-weight: bold;padding: 25px;">Total Ttc :<span style="font-size: 20px;font-weight: bold;" id="total_ttc"></span></div>
                            <div class="span4" style="margin-left: 0px;font-family: monospace;font-size: 20px;font-weight: bold;padding: 25px;">Total Espèce :<span style="font-size: 20px;font-weight: bold;" id="total_espece"></span></div>
                            <div class="span4" style="margin-left: 0px;font-family: monospace;font-size: 20px;font-weight: bold;padding: 25px;">Total Cheque :<span style="font-size: 20px;font-weight: bold;" id="total_cheque"></span></div>
                            <div class="span4" style="margin-left: 0px;font-family: monospace;font-size: 20px;font-weight: bold;padding: 25px;">Total Effet :<span style="font-size: 20px;font-weight: bold;" id="total_effet"></span></div>
                        </div>
                    </div>
                    <div id="liste_devis">
                        <div class="giveHeight">
                            <table class="responsive dynamicTable display table table-bordered dataTable">
                                <thead>
                                <th>Date</th>
                                <th>Espèce</th>
                                <th>Cheque</th>
                                <th>Effet</th>
                                <th>Total</th>
                                </thead>
                                <tbody id="detail_journal_ciasse">
                                <td colspan="5">Selectionner une caisse</td>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    heure1 = ''
    heure2 = ''
    date1 = ''
    date2 = ''
    $('#caisse').val(-1)
    $("#filtre_date1").datepicker({
        changeMonth: true,
        onClose: function(selectedDate) {
            $("#filtre_date2").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#filtre_date2").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        onClose: function(selectedDate) {
            $("#filtre_date1").datepicker("option", "maxDate", selectedDate);
        }
    });
    $('#filtre_date1').change(function() {
        date1 = changeFormatDate($('#filtre_date1').val())
        chargerDetail()
    })
    $('#filtre_date2').change(function() {
        date2 = changeFormatDate($('#filtre_date2').val())
        chargerDetail()
    })
    $('#filtre_heure').change(function() {
        heure = $("#filtre_heure option:selected").text();
        heure = heure.split('h')
        heure1 = heure[0] * 3600
        if (heure1 != 0) {
            heure2 = heure[1]
            heure2 = heure2.split('->')
            heure2 = heure2[1] * 3600
        } else {
            heure1 = ''
            heure2 = ''
        }
        chargerDetail()
    })
    function changeFormatDate(date) {
        if (date == '')
            return date
        date = date.split('/')
        date = date[2] + '-' + date[1] + '-' + date[0]
        return date
    }
    $('#caisse').change(function() {
        if ($(this).val() == -1) {
            $('#detail_journal_ciasse').html('<td colspan="5">Selectionner une caisse</td>')
            $('#total_ttc').html((data.ttc).toFixed(3))
            $('#total_effet').html(0.000)
            $('#total_cheque').html(0.000)
            $('#total_espece').html(0.000)
        } else {
            chargerDetail()
        }
    })
    function chargerDetail() {
        $.ajax({
            url: '{{path('gds_vente_journal_caisse_detail')}}',
            dataType: 'json',
            data: 'caisse=' + $('#caisse').val() + '&date1=' + date1 + '&date2=' + date2
                    + '&heure1=' + heure1 + '&heure2=' + heure2,
            success: function(data) {
                $('#detail_journal_ciasse').html(data.list)
                $('#total_ttc').html((data.ttc).toFixed(3))
                $('#total_effet').html((data.effet).toFixed(3))
                $('#total_cheque').html((data.cheque).toFixed(3))
                $('#total_espece').html((data.espece).toFixed(3))
            }
        })
    }

    </script>
{% endblock body %}